<template>
    <div>
        <div class="labour-content">
            <div class="labour">
                <h5>总人数</h5>
                <div class="number">835</div>
                <div class="line-block">
                    <h5>总人数对比</h5>
                    <el-select class="time-select" v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.value">
                        </el-option>
                    </el-select>
                    <div class="line">
                        <line-simple id="line-1" :data="line_1" class="line-chart"></line-simple>
                    </div>
                </div>
            </div>
        </div>
        <div class="labour-content">
            <div class="labour">
                <h5>各工种人数</h5>
                <div class="show-number">
                    <div class="number-block">
                        <h5>钢筋工</h5>
                        <div class="number">56</div>
                    </div>
                    <div class="number-block">
                        <h5>模板工</h5>
                        <div class="number">130</div>
                    </div>
                    <div class="number-block">
                        <h5>硂工</h5>
                        <div class="number">210</div>
                    </div>
                    <div class="number-block">
                        <h5>架子工</h5>
                        <div class="number">310</div>
                    </div>
                    <div class="number-block">
                        <h5>水电安装工</h5>
                        <div class="number">500</div>
                    </div>
                    <div class="number-block">
                        <h5>电梯安装工</h5>
                        <div class="number">40</div>
                    </div>
                    <div class="number-block">
                        <h5>电工</h5>
                        <div class="number">20</div>
                    </div>
                    <div class="number-block">
                        <h5>其他</h5>
                        <div class="number">15</div>
                    </div>
                </div>

                <div class="line-block">
                    <h5>各工种人数对比</h5>
                    <el-select class="time-select" v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.value">
                        </el-option>
                    </el-select>
                    <div class="line">
                        <line-simple id="line-2" :data="line_2" class="line-chart"></line-simple>
                    </div>
                </div>
            </div>
        </div>
        <div class="labour-content">
            <div class="labour">
                <h5>工作面人数</h5>
                <div class="show-number">
                    <div class="number-block">
                        <h5>T1顶楼</h5>
                        <div class="number">56</div>
                    </div>
                    <div class="number-block">
                        <h5>T1·3层</h5>
                        <div class="number">130</div>
                    </div>
                    <div class="number-block">
                        <h5>T2顶楼</h5>
                        <div class="number">210</div>
                    </div>
                    <div class="number-block">
                        <h5>T2·5层</h5>
                        <div class="number">310</div>
                    </div>
                    <div class="number-block">
                        <h5>B2层3-8区</h5>
                        <div class="number">500</div>
                    </div>
                    <div class="number-block">
                        <h5>裙楼2层3-12区</h5>
                        <div class="number">40</div>
                    </div>
                    <div class="number-block">
                        <h5>裙楼2层3-13区</h5>
                        <div class="number">20</div>
                    </div>
                    <div class="number-block">
                        <h5>裙楼2层3-14区</h5>
                        <div class="number">15</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="labour-content">
            <div class="labour">
                <h5>交底情况统计</h5>
                <div class="show-number">
                    <div class="two-number">
                        <h5>已交底</h5>
                        <div class="number">836</div>
                    </div>
                    <div class="two-number">
                        <h5>未交底</h5>
                        <div class="number">9</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import LineSimple from "@/components/charts/LineSimple.vue";

export default {
    name: "labour-server-table",
    components: {
        LineSimple
    },
    data() {
        return {
            line_1: {
                x: ["9.19", "9.20", "9.21", "9.22", "9.23", "9.24", "9.25"],
                data: [[250, 400, 420, 650, 750, 480, 835]],
                name: ["每天总人数"],
                color: ["#fa5c5c"]
            },
            line_2: {
                x: ["9.19", "9.20", "9.21", "9.22", "9.23", "9.24", "9.25"],
                data: [
                    [320, 450, 550, 675, 750, 600, 835],
                    [150, 250, 700, 525, 575, 756, 450],
                    [375, 290, 475, 288, 325, 550, 275],
                    [650, 577, 762, 590, 610, 825, 575],
                    [225, 160, 375, 160, 275, 450, 134]
                ],
                name: ["钢筋工", "模板工", "硂工", "水电安装工", "其他"],
                color: ["#3581fb", "#fa5c5c", "#eaa000", "#37b877", "#39d5d2"]
            },
            value: "七天人数统计",
            options: [{ value: "七天人数统计" }]
        };
    }
};
</script>

<style scoped>
@import "../../assets/css/data.css";
.labour-content {
    padding-top: 30px;
    background: #f8f9fa;
}
.labour-content:first-of-type {
    padding-top: 0px;
}
.labour {
    background-color: #fff;
    padding: 32px 32px 0 45px;
}
.number {
    font-size: 50px;
    color: #3581fb;
    margin-top: 7px;
}
.line-block {
    margin-top: 50px;
}
.line-chart {
    width: 80%;
    height: 300px;
}
.time-select {
    float: right;
    width: 160px;
}
.show-number {
    margin-top: 32px;
    height: 117px;
}
.number-block {
    float: left;
    width: calc(12.5% - 1px);
    text-align: center;
    border-right: 1px solid #d3d9e2;
}
.number-block:last-of-type, .two-number:last-of-type {
    border: none;
}
.two-number {
    float: left;
    width: calc(50% - 1px);
    text-align: center;
    border-right: 1px solid #d3d9e2;
}
</style>
